クロスプラットフォームフレームワーク「Capacitor」でネイティブAPIを呼び出す方法（iOS編）

CapacitorははWebアプリをクロスプラットフォーム向けにブリッジするためのフレームワークです。本記事では、ネイティブAPIを呼び出す方法を解説しています。

#Angular

#クロスプラットフォーム

#Ionic

諏訪悠紀

2020.02.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Capacitorとは

CapacitorはWebアプリをクロスプラットフォーム向けにブリッジするためのフレームワークです。概要は以下の記事にまとめていますのでご参照ください。

Capacitorを使ったWebアプリからは プラグイン という機能を使ってネイティブのAPIを呼び出すことができるようになっています。本記事では、ネイティブAPIを呼び出す方法を解説します。

まずはプラグイン一覧を確認しよう

Capacitorでは標準で用意されているプラグイン、および有志により作られたコミュニティプラグインがすでにたくさんあります。

作りたい機能が決まったら、まずはすでに存在するプラグインの中で用途にマッチしているものがないか探すようにしましょう。

カスタムでネイティブAPIを呼び出す方法

カスタムネイティブAPIを呼び出すには、2つの方法があります。

npm moduleとして公開可能なプラグインを作る : Capacitor iOS Plugin Guide
プロジェクト専用のネイティブコードを実装する : カスタムネイティブiOSコード

こちらで解説されている方法は前者で、npmでの公開が必要になります ^*1。後者の場合はプロジェクト専用のコードになるため、どこかに公開する必要などはなく気軽に作り始めることができます。

本記事では、プロジェクト専用のネイティブコードを実装してみます。

プロジェクト専用のネイティブコードを実装する

まずはXcodeプロジェクトを開き、Swiftファイルを作成します。名前を CustomBridge.swift としました。

import Capacitor

@objc(CustomBridge)
public class CustomBridge: CAPPlugin {
  @objc func echo(_ call: CAPPluginCall) {
    let value = call.getString("value") ?? ""
    call.success([
        "value": value
    ])
  }
}

CustomBridge クラスを作っています。このクラスは CAPPlugin を継承しています。

echo メソッドを実装していますが、このメソッドはWebアプリ側で呼び出すメソッド名そのものになります。メソッドを増やしたい場合は、このように CustomBridge クラスにメソッドを追加していきます。

メソッドは CAPPluginCall のインスタンスが引数として渡されます。上記の実装コードのように call.success を呼び出すことでWebアプリ側にレスポンスを返すことができます。

次にマクロを登録するため CustomBridge.m ファイルを作成します。.h ではない点に注意してください。

#import <Capacitor/Capacitor.h>

CAP_PLUGIN(CustomBridge, "CustomBridge",
  CAP_PLUGIN_METHOD(echo, CAPPluginReturnPromise);
)

Capacitorで作られるXcodeプロジェクトはSwiftベースになっているため、 .m ファイルのようにObjective-Cファイルを作成する際にはBridging Headerが必要になります。以下のダイアログが表示されますので「Create Bridging Header」をクリックします。

以上でXcode側の実装作業は終わりです。

次にWeb App側に呼び出すコードを実装します。1つ目のタブで呼び出し、結果をアラートで表示してみます。

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { Plugins } from "@capacitor/core";
const { CustomBridge } = Plugins;

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(public alertController: AlertController) {}

  async ionViewDidEnter() {
    const result = await CustomBridge.echo({ value: "Hello World!" });
    const alert = await this.alertController.create({
      message: result.value,
      buttons: ['OK']
    });
    await alert.present();
  }

}

これだけです。Webアプリ側の実装はとてもシンプルです。